<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title" style="width: 70%">
        我的关注中({{ tableData.length }})<i class="el-icon-loading" v-if="loading"></i><br>
        <span class="tips">
          <span v-for="(item,idx) in sections" v-if="idx<26">{{ item }}<b
            title="涨停数/近五日总涨停数/跌停数">({{ stopUpDatas[0].sectionStopUpCount[item] }}/{{
              stopUpDatas[0].sectionCount[item]
            }}/{{ stopUpDatas[0].sectionStopDownCount[item] }})</b>，</span>
        </span>
      </span>
      <div style="padding:20px 0">
        <el-input v-model="query.keyword"
                  placeholder="代码或名称"
                  style="width: 120px;margin-right: 10px;"
                  size="small" clearable></el-input>
        <el-select v-model="query.orderBy" placeholder="排序方式" size="small" clearable style="margin-right: 10px;width: 100px;">
          <el-option
            label="时间排序"
            :value="0">
          </el-option>
          <el-option
            label="板块排序"
            :value="1">
          </el-option>
          <el-option
            label="涨幅排序"
            :value="2">
          </el-option>
          <el-option
            label="跌幅排序"
            :value="3">
          </el-option>
          <el-option
            label="低震幅排序"
            :value="4">
          </el-option>
        </el-select>
        <el-select v-model="query.section" placeholder="请选择版块" size="small" clearable style="margin-right: 10px;width: 120px;">
          <el-option
            label="全部版块"
            :value="null">
          </el-option>
          <el-option
            v-for="item in sections"
            :key="item"
            :label="`${item}(${stopUpDatas[0].sectionStopUpCount[item]}/${stopUpDatas[0].sectionCount[item]}/${stopUpDatas[0].sectionStopDownCount[item]})`"
            :value="item">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="getData" v-loading="loading" style="margin-right: 10px;">刷新
        </el-button>
        <el-button size="small" type="primary" @click="tableModel=!tableModel">
          {{ tableModel ? '图形' : '表格' }}
        </el-button>
      </div>
    </div>
    <div class="common-bot" v-if="tableData.length">
      <el-table v-if="tableModel" :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="股票名称" width="270" fixed>
          <template slot-scope="scope">
              <span title="昨日涨幅" v-if="yesterday && yesterday.hasOwnProperty(scope.row.code)"
                    :class="{word_red:yesterday[scope.row.code].riseRatio>0, word_green:yesterday[scope.row.code].riseRatio<0}">
                {{ yesterday[scope.row.code].riseRatio }}%
              </span>
            <el-link :href="`https://quote.eastmoney.com/concept2/${scope.row.code}.html`" target="_blank">
              <b>{{ scope.row.name }}</b>
              <i class="el-icon-s-flag" style="color: red" title="屠龙刀"
                 v-if="dragonLayers.indexOf(scope.row.code)>-1"></i>
            </el-link>
            <span style="cursor: pointer" slot="reference">({{ scope.row.code }})</span>
            <span title="今日涨幅" :class="{word_red:scope.row.info.riseRatio>0, word_green:scope.row.info.riseRatio<0}">
                {{ scope.row.info.riseRatio }}%
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="section" label="版块" width="170">
          <template slot-scope="scope">
            <span title="该版块关注的数量">
              {{ sectionCount[scope.row.section] }}
              </span>
            <span :title="scope.row.info.concept">
              {{ scope.row.section }}
              </span>
              <b title="涨停数/近五日总涨停数/跌停数">({{ stopUpDatas[0].sectionStopUpCount[scope.row.section] }}/{{ stopUpDatas[0].sectionCount[scope.row.section] }}/{{ stopUpDatas[0].sectionStopDownCount[scope.row.section] }})</b>
          </template>
        </el-table-column>
        <el-table-column prop="datetime" label="关注日期"/>
        <el-table-column prop="price" label="收录价"/>
        <el-table-column prop="price" label="现价(涨幅)">
          <template slot-scope="scope">
            {{ scope.row.info.now }}
            <span title="涨幅"
                  :class="{word_red:scope.row.currentProfitRatio>0, word_green:scope.row.currentProfitRatio<0}">
                &nbsp;{{ scope.row.currentProfitRatio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="maxProfitRatio" label="最大涨幅">
          <template slot-scope="scope">
            <span title="最大涨幅"
                  :class="{word_red:scope.row.maxProfitRatio>0, word_green:scope.row.maxProfitRatio<=0}">
                &nbsp;{{ scope.row.maxProfitRatio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="info.pe" label="市盈率"/>
        <el-table-column prop="info.turnoverRatio" label="换手率(%)"/>
        <el-table-column prop="info.maxTurnoverRatio" label="最大换手率(%)">
          <template slot-scope="scope">
            <span :class="{word_red_b:scope.row.active}">
              {{ scope.row.info.maxTurnoverRatio }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="lowAmplitudeTimes" label="低震幅分"/>
        <el-table-column prop="info.score" label="AI评分"/>
        <el-table-column prop="kLine" label="K线图" width="100">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="1150"
              trigger="hover">
              <div>
                <img
                  :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">

                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
                <img
                  :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${scope.row.info.eastMoneyFullCode}&timespan=${Math.random()}`"
                  :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${scope.row.info.eastMoneyFullCode}&timespan=`">
              </div>
              <span style="cursor: pointer" slot="reference">({{ scope.row.code }})</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="actions"
          label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-popconfirm title="确定取关吗？"
                           confirm-button-text='好的'
                           cancel-button-text='不'
                           @confirm="collect(scope.row, false)">
              <el-link slot="reference" type="danger" style="margin-left: 3px;" size="small">
                取关
              </el-link>
            </el-popconfirm>
            <el-popconfirm title="确定完成吗？"
                           confirm-button-text='好的'
                           cancel-button-text='不'
                           v-if="!scope.row.finished"
                           @confirm="finished(scope.row.id)">
              <el-link slot="reference" type="primary" style="margin-left: 3px;" size="small">
                完成
              </el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-else :gutter="5" v-for="(item,idx) in tableData" :key="idx" class="line">
        <el-col :span="24" style="font-size: 12px;line-height: 150%">
          时间：{{ item.createTime | parseTime('{m}-{d} {h}:{i}') }}，
          现价：<b>{{ item.info.now }}</b>
          <span title="浮盈" :class="{word_red:item.currentProfitRatio>0, word_green:item.currentProfitRatio<0}">({{
              item.currentProfitRatio
            }}%)</span>，
          最高：{{ item.info.high }}，
          最低：{{ item.info.low }}，
          市值：{{ item.info.totalValueY }}，
          流通市值：{{ item.info.circulationValueY }}，
          市盈率：{{ item.info.pe }}，
          换手率：{{ item.info.turnoverRatio }}%/<span title="近期最大换手">{{ item.info.maxTurnoverRatio }}%</span>，
          成交额：{{ item.info.moneyY }}亿，
          <b>最大涨幅：<span title="浮盈" :class="{word_red:item.maxProfitRatio>0, word_green:item.maxProfitRatio<0}">{{
            item.maxProfitRatio
            }}%</span></b>，
          <b>所属概念：</b>{{ item.info.concept }}，
          <b>低震幅分：</b>{{ item.lowAmplitudeTimes }}
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="font-size: 12px;line-height: 150%">
            <img
              :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=${Math.random()}`"
              :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=`"
              :title="item.info.concept">
            <div>
              <span title="昨日涨幅" v-if="yesterday.hasOwnProperty(item.code)"
                    :class="{word_red:yesterday[item.code].riseRatio>0, word_green:yesterday[item.code].riseRatio<0}">
                {{ yesterday[item.code].riseRatio }}%
              </span>
              <el-link :href="`https://quote.eastmoney.com/concept2/${item.code}.html`" target="_blank">
                <b>{{ item.name }}</b>
                <i class="el-icon-s-flag" style="color: red" title="屠龙刀" v-if="dragonLayers.indexOf(item.code)>-1"></i>
              </el-link>
              ({{ item.code }})
              <span title="今日涨幅" :class="{word_red:item.info.riseRatio>0, word_green:item.info.riseRatio<0}">
                  {{ item.info.riseRatio }}%
              </span>
              振幅：{{ item.info.amplitude }}%
            </div>
            <div>
            <span title="该版块关注的数量">
              {{ sectionCount[item.info.section] }}
            </span>
              {{ item.info.section }}
              <el-button type="danger" size="mini" round @click="collect(item, false)" style="padding: 3px 5px;">
                取消关注
              </el-button>
              <el-button type="danger" size="mini" round @click="finished(item.id)" style="padding: 3px 5px;margin-left: 5px;" v-if="!item.finished">
                完成操作
              </el-button>
              <div v-for="(stopUpData,idx) in stopUpDatas" :key="idx">
                {{ stopUpData.datetime }}<b title="涨停数/近五日总涨停数/跌停数" style="margin-left: 5px">({{
                  stopUpData.sectionStopUpCount[item.info.section]
                }}/{{
                  stopUpData.sectionCount[item.info.section]
                }}/{{ stopUpData.sectionStopDownCount[item.info.section] }})</b>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
      </el-row>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.page"
          :page-size="query.limit"
          layout="total, prev, pager, next"
          :total="totalElement"></el-pagination>
      </div>
    </div>
    <el-empty style="margin-top: 200px" description="还未关注任何股票" v-if="!tableData.length && !loading">
    </el-empty>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import pubsub from "pubsub-js";
import {myId} from "@/utils";

export default {
  components: {Briefly},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      showPage: false,
      tableModel: true,
      tableData: [],
      query: {
        keyword: '',
        section: '',
        orderBy: 0,
        limit: 200,
        page: 1,
      },
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      loading: false,
      yesterday: {},
      stopUpDatas: [],
      sections: [],
      dragonLayers: [],
      sectionCount: {},
      myInterval: null
    };
  },
  watch: {
    'query.keyword'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.section'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.page'(val) {
      this.getData();
      this.setStateData(val);
    },
    'query.limit'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.orderBy'(val) {
      this.query.page = 1;
      this.getData();
    },
  },
  methods: {
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    getData() {
      this.loading = true;
      Api.stockCollect.all({
        ...this.query,
        page: this.query.page - 1,
        createBy: myId()
      }).then((res) => {
        this.tableData = res.data;
        this.totalElement = res.total;
        this.yesterday = res.extra.yesterday;
        this.stopUpDatas = res.extra.stopUpDatas;
        this.sections = res.extra.stopUpDatas[0].sections;
        this.dragonLayers = res.extra.dragonLayers;
        this.sectionCount = res.extra.sectionCount;
        this.showPage = true;
        this.loading = false;
      }).catch(e => this.loading = false);
    },
    collect(stock, collected) {
      if (collected) {
        Api.stockCollect.modify({code: stock.code}).then(res => this.getData())
      } else {
        Api.stockCollect.cancel({code: stock.code}).then(res => this.getData())
      }
    },
    finished(id) {
      Api.stockCollect.finished({targetId: id}).then(res => this.getData())
    }
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
    this.myInterval = setInterval(() => {
      $(".line img").each(function (i, e) {
        $(e).attr("src", $(e).attr("alt") + Math.random())
      })
    }, 5000)
    pubsub.subscribe('notify', (msgName, data) => {
      this.getData()
    })
  },
  destroyed() {
    clearInterval(this.myInterval)
    pubsub.unsubscribe('notify');
  }
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}

.word_red {
  font-style: italic;
  font-size: 14px;
  color: red;
}

.word_green {
  font-style: italic;
  font-size: 14px;
  color: green;
}

.word_red_b {
  font-style: italic;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.common-bot {
  .line {
    padding: 5px 0;
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>
